<template>
  <div class="app-container">
    <ElConfigProvider :size="store.sizeStatus as Size" :locale="globalLocale">
      <router-view></router-view>
    </ElConfigProvider>
  </div>
</template>

<script lang="ts" setup>
import { useGenerateTheme } from "./hooks/useGenerateTheme";
import { LocaleKeys, Size } from "./plugins/element";
import { useAppStore } from "./stores/app";
import * as locales from "element-plus/es/locales.mjs";

const store = useAppStore();
const globalLocale = computed(
  () => locales[store.locale as LocaleKeys] || locales.zhCn
);

useGenerateTheme(); // watch主题
</script>
